$(function () {
  // 定义开关变量
  var flagUser=false
  var flagPwd=false
  var eyeBlur=true

  // 找到所在标签元素
  var $user_name = $('#user_name')
  var $pwd=$('#password')
  var $submitBtn=$('#submitBtn')
  var $submit=$('#form_sub')

  // 1.如果失去焦点，则进行检查判断用户名是否合法
  // $user_name.blur(function () {
  //     // 封装函数 调用函数
  //     fnCheckUser()
  // })
  $user_name.on('input',function (e) {
    e.stopPropagation();
      // 封装函数 调用函数
      fnCheckUser()
  })
  function fnCheckUser() {
      // 获取用户输入的数据
      var vals = $user_name.val()
      console.log(vals)
      // 正则，正则验证用户输入的数据是否合法
      var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (vals == '') {
          $user_name.next().show().html('*用户名不能为空')
          $user_name.css('border','1px solid #ff0000')
          flagUser=false
          return
      }
      if (re.test(vals)) {
          // 合法 -- 隐藏报错信息
          $user_name.next().hide()
          $user_name.css('border','1px solid #333333')
          flagUser=true
      } else {
          // 不合法 -- 报错 -- 下面的span标签显示
          $user_name.next().show().html('*手机号格式错误')
          $user_name.css('border','1px solid #ff0000')
          flagUser=false
      }
  }

      // 2.如果密码框失去焦点，则进行检查判断密码是否合法
  // $pwd.blur(function(){
  //     // 封装函数，调用函数
  //     fnCheckPwd()
  // })

  $pwd.on('input',function (e) {
    e.stopPropagation();
      // 封装函数 调用函数
      fnCheckPwd()
  })
  function fnCheckPwd(){
      // 获取密码框输入的数据
  
      var vals=$pwd.val()
      console.log(vals)
      // 密码正则匹配表达式
      var rePass = /^[\w!-@#$%^&*]{6,20}$/
// if(eyeBlur){
      // 如果输入框为空，则提示不能为空并return
      if (vals==''){
          $pwd.next().show().html('*密码不能为空')
          $pwd.css('border','1px solid #ff0000')
          flagPwd=false
          return
      }
      // 正则验证密码输入是否合法
      if(rePass.test(vals))
      {
          // 如果匹配成功，则隐藏span标签
          $pwd.next().hide()
          $pwd.css('border','1px solid #333333')
          flagPwd=true
      }
      else
      {
          // 如果匹配失败，则显示span标签，替换提示信息
          $pwd.next().show().html('*密码是6到20位字母、数字，还可包含@!#$%^&*-字符')
          $pwd.css('border','1px solid #ff0000')
          flagPwd=false
      }
    // }else {
    //   return eyeBlur=true
    // }
  }
  // 6.所有输入框验证通过再提交注册
//   $submit.submit(function(){
//     if(flagUser && flagPwd){
//         alert('OK!')
//     }
//     else{
//         alert("Not OK!")
//         return false
//     }
// })
$submitBtn.click(function(){
  if(flagUser && flagPwd){
    // alert('OK!')
}
else{   
      fnCheckUser()
      fnCheckPwd()   
    // alert('not OK!')

    return false
}

})

// 密码的显示与隐藏
$('.input_item .iconfont').mousedown(function(){
  console.log('mousedown')
  // eyeBlur=false
  hideShowPsw()

})
// $('.input_item .iconfont').mouseup(function(){
//   console.log('mouseup')
//   eyeBlur=true
//   fnCheckPwd()
// })
  function hideShowPsw(){ 
    // $pwd.unbind('blur')
    // $pwd.trigger('blur');

    console.log($pwd.attr('type'))
    if ($pwd.attr('type') == "password") { 
      $pwd.prop("type","text");
      $('.icon-yincang').hide().siblings('.icon-liulan').show()
    }else {  
      $pwd.prop("type","password");
      $('.icon-liulan').hide().siblings('.icon-yincang').show()      
    }  
}  

 
   // 5.点击同意协议复选框，判断是否勾选。如果勾选，则隐藏提示信息，没有勾选，则显示报错信息
  //  $allow.click(function(){
  //      fnCheckAllow()
  //     })
  // // 封装函数
  // function fnCheckAllow(){
  //     if($allow.prop('checked'))
  //      {
  //         $allow.next().next().hide()
  //         flagAllow=true
  //      }
  //      else
  //      {
  //          $allow.next().next().show().html("请勾选同意协议")
  //          flagAllow=false
  //      }
  // }


})

